<script setup lang="ts">
/* eslint-disable */
// eslint-disable-next-line vue/no-setup-props-destructure
import { reactive, ref, Ref, watch, nextTick } from "vue";
import VuePictureCropper, { cropper } from "vue-picture-cropper";
import { UploadRawFile } from "element-plus";
import { uploadFile } from "@/api/modules/org/file-attachment";
import { generateUUId } from "@/utils/common";
import { bolbToFile, fileToBase64 } from "@whjxtech/jxtech-component";
import userBeanServiceApi from "@/api/modules/org/bean/user-bean";

interface IAvatarChangeDialogProps {
  visible?: boolean;
  imgUrl?: string;
}
const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  (e: "updateUserAvatarId", val: string): void;
}>();
const props = withDefaults(defineProps<IAvatarChangeDialogProps>(), {
  visible: false
});
const visibleRef = ref(props.visible);
watch(
  () => props.visible,
  val => {
    visibleRef.value = val;
  }
);
watch(
  () => visibleRef.value,
  val => {
    emit("update:visible", val);
  }
);

const AvatarChangeDialogState = reactive({
  okButtonLoadding: false,
  onCancelButtonClick: () => {
    visibleRef.value = false;
  },
  onResetButtonClick: () => {
    cropper?.reset();
  },
  onClearButtonClick: () => {
    cropper?.clear();
  },
  onOkButtonClick: () => {
    cropper?.getBlob().then(blob => {
      AvatarChangeDialogState.okButtonLoadding = true;
      const file = bolbToFile(blob as Blob);
      const formData = new FormData();
      formData.append("itemType", "userImg");
      formData.append("busiId", "userImg");
      formData.append("compId", "org");
      formData.append("files", file as File);

      uploadFile(formData).then(res => {
        userBeanServiceApi
          .updateUserImage({ fileId: res.data[0].fileId })
          .then(() => {
            emit("updateUserAvatarId", res.data[0].fileId);
            visibleRef.value = false;
          })
          .catch(err => {
            console.log(err);
          })
          .finally(() => {
            AvatarChangeDialogState.okButtonLoadding = false;
          });
      });
    });
  }
});

const VuePictureCropperState = reactive({
  bodyStyle: {
    width: "300px",
    height: "300px",
    backgroundColor: "#f8f8f8",
    margin: "auto"
  },
  options: {
    viewMode: 1,
    dragMode: "crop",
    aspectRatio: 1 / 1
  }
});

const ElUploadState = reactive({
  imgUrl: props.imgUrl,
  beforeUpload(rawFile: UploadRawFile) {
    console.log("rawFile", rawFile);
  },
  fileList: [] as any[]
});

watch(
  () => ElUploadState.fileList,
  val => {
    if (val.length === 0) return;
    fileToBase64(val[0].raw, (res: string) => {
      ElUploadState.imgUrl = res;
      ElUploadState.fileList = [];
    });
  }
);
</script>

<template>
  <el-dialog title="修改用户头像" destroy-on-close width="40%" v-model="visibleRef">
    <template #default>
      <VuePictureCropper
        :boxStyle="VuePictureCropperState.bodyStyle"
        :img="ElUploadState.imgUrl"
        :options="VuePictureCropperState.options"
        :limit="1"
      >
      </VuePictureCropper>
      <el-upload
        ref="uploadRef"
        v-model:file-list="ElUploadState.fileList"
        class="upload-demo"
        :auto-upload="false"
        accept=".jpg,.png,.jpeg"
        :before-upload="ElUploadState.beforeUpload"
      >
        <template #trigger>
          <el-button type="primary">上传图片</el-button>
        </template>
      </el-upload>
    </template>
    <template #footer>
      <JxtechCancelButton @click="AvatarChangeDialogState.onCancelButtonClick">
        {{ $t("button.cancel") }}
      </JxtechCancelButton>
      <JxtechResetButton @click="AvatarChangeDialogState.onResetButtonClick">
        {{ $t("button.reset") }}
      </JxtechResetButton>
      <JxtechButton @click="AvatarChangeDialogState.onClearButtonClick">
        {{ $t("button.clear") }}
      </JxtechButton>
      <JxtechOkButton @click="AvatarChangeDialogState.onOkButtonClick" :loading="AvatarChangeDialogState.okButtonLoadding">
        {{ $t("button.ok") }}
      </JxtechOkButton>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
